<template>
  <el-dialog :visible.sync="currentVisible"
             append-to-body
             width="550px"
             title="Select Dashboard">
    <div v-loading="loading"
         class="b-widget-modal flex flex-col">
      <div class="b-widget-modal__header flex justify-end items-center">
        <el-input placeholder="Search"
                  style="width:160px"
                  suffix-icon="el-icon-search"
                  clearable
                  v-model="searchForm.name"
                  @input="keyWordsChange"></el-input>
      </div>
      <div class="b-widget-modal__body flex-1">
        <div class="item flex items-center cursor-pointer"
             @click.stop="onSelect(item)"
             v-for="item in resources"
             :key="item.id">
          {{item.name}}
        </div>
      </div>

      <div class="b-widget-modal__footer">
        <el-pagination background
                       :current-page="searchForm.pagination.currentPage"
                       :page-sizes="searchForm.pagination.pageSizes"
                       :pagerCount="searchForm.pagination.pageCount"
                       :page-size="searchForm.pagination.pageSize"
                       layout="prev, pager, next"
                       @size-change="sizeChangeResource"
                       @current-change="currentChangeResource"
                       :total="searchForm.pagination.total">
        </el-pagination>
      </div>
    </div>

  </el-dialog>
</template>

<script>
import { debounce } from 'lodash'
import { fetchReportList } from '@/api/new'
import { parseSearch } from '@/components/storybook/hooks/useFast'

export default {
  name: 'BWidgetModal',
  props: {
    visible: Boolean,

    // table query parameter
    searchForm: {
      type: Object,
      default: () => ({})
    },

    modelInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      loading: false,
      resources: [],
    }
  },

  created () {
    this.init()
  },
  computed: {
    currentVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    // content () {
    //   const { gadgetId, gadgetType, id, name } = this.modelInfo
    //   return {
    //     "x": 0,
    //     "y": 0,
    //     "w": 6,
    //     "h": 21,
    //     "i": gadgetId,
    //     "com": gadgetType,
    //     "id": id,
    //     "name": name,
    //     "businessType": "Custom",
    //     "moved": false
    //   }
    // }
  },
  methods: {
    async onSelect (data) {
      this.$store.state.ai.prepareWidget = this.modelInfo
      this.currentVisible = false
      
      this.$router.push({
        path: `dashboard-${data.id}`,
        query: {
          pageid: data.id,
          name: data.name
        },

      })
    },
    async init () {
      try {
        this.loading = true
        const resources = await this.getTableData()
        this.resources = resources.records || []
        this.searchForm.pagination.total = resources.total || 0
      } catch (error) {

      } finally {
        this.loading = false
      }
    },
    keyWordsChange: debounce(function () {
      this.loading = true
      this.searchForm.pagination.currentPage = 1
      return this.getTableData().then(resources => {
        this.resources = resources.records || []
        this.searchForm.pagination.total = resources.total || 0
      }).finally(() => {
        this.loading = false
      })
    }, 1000),
    async sizeChangeResource (size) {
      try {
        this.loading = true
        this.searchForm.pagination.currentPage = 1
        this.searchForm.pagination.pageSize = size
        const resources = await this.getTableData()
        this.resources = resources.records || []
        this.searchForm.pagination.total = resources.total || 0
      } catch (error) {
      } finally {
        this.loading = false
      }
    },
    async currentChangeResource (current) {
      try {
        this.loading = true
        this.searchForm.pagination.currentPage = current
        const resources = await this.getTableData()
        this.resources = resources.records || []
        this.searchForm.pagination.total = resources.total || 0
      } catch (error) {
      } finally {
        this.loading = false
      }
    },
    async getTableData (refresh) {
      const params = {
        ...parseSearch(this.searchForm, 'report'),
        queryType: refresh || this.$store.state.REFRESHCACHE ? 'REFRESHCACHE' : null
      }
      const { data: response } = await fetchReportList(params)
      if (response.code !== 0) {
        throw response.msg
      }

      return response.data || {}
    },
  }
}
</script>

<style lang="scss">
.b-widget-modal {
  max-height: 600px;
  &__header {
    height: 48px;
    background: #f2f4f8;
    border: 1px solid #dde1e6;
    border-bottom: 0;
    padding: 0 8px;
  }
  &__body {
    border-left: 1px solid #dde1e6;
    border-right: 1px solid #dde1e6;
    border-bottom: 1px solid #dde1e6;
    .item {
      height: 40px;
      padding: 0 8px;
      background: #ffffff;

      border-top: 1px solid #dde1e6;
    }
  }
  &__footer {
    margin-top: 8px;
  }
}
</style>